{extend name='public/base' /}

{block name="style"}
{css href="/node_modules/ztree/css/zTreeStyle/zTreeStyle.css" /}
{css href="/node_modules/wangeditor/dist/css/wangEditor.min.css" /}
{css href="/static/inspinia/css/plugins/dropzone/basic.css" /}
{css href="/static/inspinia/css/plugins/dropzone/dropzone.css" /}
{css href="/static/inspinia/css/plugins/switchery/switchery.css" /}
{/block}

{block name="breadcrumb"}
{$crumbs}
{/block}

{block name="body"}
<div class="col-lg-12">
    <div class="ibox float-e-margins">
        <div class="ibox-content">
            <div class="row">
                <div class="col-lg-12">
                    <div class="tabs-container col-lg-12">
                        <ul class="nav nav-tabs">
                            <li class="active"><a data-toggle="tab" href="#tab-1"> 基本信息</a></li>
                            {gt name="product.id" value="0"}
                            <li class=""><a data-toggle="tab" href="#tab-2">图片</a></li>
                            {/gt}
                        </ul>
                        <div class="tab-content">
                            <div id="tab-1" class="tab-pane active">
                                <div class="panel-body">
                                    <div class="col-sm-10 b-r">
                                        <h3 class="m-t-none m-b"></h3>
                                        <form role="form" action="{:url('save_product')}" method="post" autocomplete="off" data-form="form">
                                            <div class="form-group">
                                                <label>产品名称</label>
                                                <input type="text" name="name" placeholder="accounts" class="form-control" value="{$product.name|default=''}">
                                            </div>
                                            <div class="form-group">
                                                <label>是否首页显示</label>
                                                <br/>
                                                {eq name='product.is_index' value='1'}
                                                <input type="checkbox" class="js-switch" checked value="1" name="is_index" />
                                                {else /}
                                                <input type="checkbox" class="js-switch" value="1" name="is_index" />
                                                {/eq}
                                            </div>
                                            <div class="form-group">
                                                <label>详细信息</label>
                                                <textarea id="editor_id" name="content" style="width:700px;height:300px;">{$product.content|default=''}</textarea>
                                                <!--<textarea id="textarea1" style="height: 240px;;" name="content">-->
                                                    <!--<p>{$product.content|default=''}</p>-->
                                                <!--</textarea>-->
                                            </div>
                                            <div>
                                                <input type="hidden" name="id" value="{$product.id|default=0}">
                                                <input type="hidden" name="cate_id" id="category_id" value="{$product.cate_id|default=0}">
                                                <button class="btn btn-sm btn-primary m-t-n-xs" type="submit"><strong>确定</strong></button>
                                            </div>
                                        </form>
                                    </div>
                                    <div class="col-sm-2 b-r">
                                        <h3 class="m-t-none m-b"></h3>
                                        <div class="form-group">
                                            <label>产品分类</label>
                                            <ul id="tree" class="ztree"></ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div id="tab-2" class="tab-pane">
                                <div class="panel-body">
                                    <div class="col-sm-12 b-r">
                                        <div class="ibox-content">
                                            <form id="my-awesome-dropzone" class="dropzone" action="{:url('upload_product_img', ['id' => $product['id']])}" style="min-height: 160px;">
                                                <div class="dropzone-previews"></div>
                                                <button type="submit" class="btn btn-primary pull-right">提交</button>
                                            </form>
                                        </div>
                                    </div>
                                    <table class="table">
                                        <thead>
                                        <tr>
                                            <th>ID</th>
                                            <th>图片</th>
                                            <th>操作</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr>
                                            <th>ID</th>
                                            <th>图片</th>
                                            <th>
                                                <button class="btn btn-info btn-xs"><a href="#"><i class="fa fa-edit"></i> 编辑</a> </button>
                                                <button class="btn btn-danger btn-xs"><a href="javascript:;"><i class="fa fa-trash"></i> 删除</a> </button>
                                            </th>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


{/block}

{block name="javascript"}
{js href="/node_modules/ztree/js/jquery.ztree.core.js" /}
<!-- 编辑器 -->
<!--{js href="/node_modules/wangeditor/dist/js/wangEditor.min.js" /}-->
{js href="/static/kindeditor/kindeditor-all.js" /}
{js href="/static/kindeditor/lang/zh-CN.js" /}

{js href="/static/inspinia/js/plugins/dropzone/dropzone.js" /}
{js href="/static/inspinia/js/plugins/switchery/switchery.js" /}
<!-- 实例化编辑器 -->
<script>
//    var editor = new wangEditor('textarea1');
//    editor.create();
    KindEditor.ready(function(K) {
        window.editor = K.create('#editor_id');
    });

    $('form').submit(function () {
        editor.sync();
    });

    var setting = {
        data: {
            simpleData: {
                enable: true
            }
        },callback: {
            beforeClick: function(treeId, treeNode) {
                // 获取id为tree的zTree对象
                var zTree = $.fn.zTree.getZTreeObj("tree");
                if (treeNode.isParent) {
                    //展开/折叠指定的节点
                    zTree.expandNode(treeNode);
                    //false表示折叠节点
                    return false;
                } else {
                    //true表示展开节点
                    return true;
                }
            }
        }
    };
    get_img_list();
    var zNodes ={$ztree};

    $(document).ready(function(){
        $.fn.zTree.init($("#tree"), setting, zNodes);
        //获取id为tree的zTree 对象
        var zTree = $.fn.zTree.getZTreeObj("tree");
        var category_id = {$product.cate_id ? $product.cate_id : 0};
        if (category_id > 0) {
            //选中指定节点,根据节点数据的属性搜索获取条件完全匹配的节点数据JSON对象
            zTree.selectNode(zTree.getNodeByParam("id", category_id));
        }
    });

    $(document).ready(function(){
        Dropzone.options.myAwesomeDropzone = {
            autoProcessQueue: false,
            uploadMultiple: true,
            parallelUploads: 100,
            maxFiles: 100,
            // Dropzone settings
            init: function() {
                var myDropzone = this;

                this.element.querySelector("button[type=submit]").addEventListener("click", function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    myDropzone.processQueue();
                });
                this.on("sendingmultiple", function() {
                });
                this.on("successmultiple", function(files, response) {
                    get_img_list();
                });
                this.on("errormultiple", function(files, response) {
                });
            }
        }
    });

    $(function () {
        $(document).on('click', '.save-main', function () {
            // 设为主图
            var _this = $(this);
            var id = _this.data('img-id');
            $.get("{:url('save_main_img')}", {id : id}, function (msg) {
                if (msg.code == 200) {
                    get_img_list();
                }else {
                    swal({
                        title: msg.msg,
                        type: "error"
                    });
                }
            }, 'json');
        });

        $(document).on('click', '.del-img', function () {
            // 删除图片
            var _this = $(this);
            var id = _this.data('img-id');
            swal({
                title: "删除图片?",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "确认"
            }, function () {
                $.get("{:url('del_img')}", {id: id}, function (msg) {
                    if (msg.code == 200) {
                        swal({
                            title: msg.msg,
                            type: "success"
                        }, function () {
                            get_img_list();
                        });
                    } else {
                        swal({
                            title: msg.msg,
                            type: "error"
                        });
                    }
                }, 'json');
            });
        });

        var elem = document.querySelector('.js-switch');
        var switchery = new Switchery(elem, { color: '#1AB394' });
    });

    // 获取图片列表
    function get_img_list() {
        var id = {$product.id};
        $.get('{:url("get_img_list")}', {id : id}, function (msg) {
            console.log(msg);
            if (msg.code == 200) {
                var data = msg.data;
                var len = data.length;
                var html = [];
                for(var i = 0; i < len; i++ ) {
                    var h = '<tr>' +
                        '<td width="5%">'+ data[i].id +'</td>' +
                        '<td width="50%">' +
                        '<a class="element" href="javascript:;" data-html="true" data-content="<img src=\'/uploads/product/'+ data[i].image +'\' />" data-toggle="popover" data-trigger="click" style=" float: left; width: 30px; height: 30px;">' +
                        '<img src="/uploads/product/'+ data[i].image +'" style="max-width: 30px; max-height: 30px;" />' +
                        '</a>'+
                        '</td>' +
                        '<td>';
                        if(data[i].is_main == 1) {
                            h += '<button class="btn btn-success btn-xs" data-img-id="'+ data[i].id +'"><i class="fa fa-edit"></i> 主图 </button> ';
                        } else {
                            h += '<button class="btn btn-info btn-xs save-main" data-img-id="'+ data[i].id +'"><a href="javascript:;"><i class="fa fa-edit"></i> 设为主图</a> </button> ';
                        }

                    h += '<button class="btn btn-danger btn-xs del-img" data-img-id="'+ data[i].id +'"><a href="javascript:;"><i class="fa fa-trash"></i> 删除</a> </button>' +
                        '</td>' +
                        '</tr>';
                    html.push(h);
                }
                $("#tab-2").find('tbody').html(html.join(''));
            } else {
                swal({
                    title: msg.msg,
                    type: "error"
                });
            }
        }, 'json');
    }
</script>
{/block}